<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 对象的解构赋值

        // 声明对象
        const stu = { name: "zhangsan", age: 20, classid: 'web0907' };

        // 通过解构赋值的方式获取stu对象中属性值
        // 解构赋值的模式匹配中，
        //    key(name,age,classid)对应的是stu对象中的属性名，
        //    value(n,a,c)对象的是变量名
        // let {name:n, age:a, classid:c} = stu;
        let { age: a, name: n, classid: c } = stu;
        console.log(n, a, c);

        // 在下面的模式匹配中key和值是一样的话，可以省略key，直接写明
        //let {age:age, name:name, classid:classid} = stu;
        let { age, name, classid } = stu;
        console.log(name, age, classid);

        // 我们还可以解析对象中部分属性值
        // 此处的{}是为了开启一个块级作用域，防止let的重复变量声明
        {
            // 解析部分属性值
            let { age, name } = stu;
            console.log(name, age);
        }


        // 与数组一样，解构也可以用于嵌套结构的对象。
        //定义一个书的信息
        const obj = {
            book: [
                'JavaScript权威指南',
                { author: '小淘', price: 132 }
            ]
        };
        // 要求从上面obj对象中直接解析出书的标题，作者和价格信息
        let { book: [title, { author, price }] } = obj;
        console.log(title, author, price);

        // 不使用结构赋值方式，直接获取信息（不推荐）
        console.log(obj.book[1].author); // 作者


        var { x = 3 } = {};
        console.log(x); // 3

        var { x1, y1 = 5 } = { x1: 1 };
        console.log(x1); // 1
        console.log(y1); // 5

        var { x2: y2 = 3 } = {};
        console.log(y2); // 3

        var { x3: y3 = 3 } = { x3: 5 };
        console.log(y3); // 5

    </script>
</body>

</html>